<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link type="text/css" rel="stylesheet" href="css/chapter4-5.css"/>
</head>
<body>
    <pre>
        JS事件：事件是文档或者浏览器窗口中发生的，特定的交互瞬间
        JS中的常见事件：
            onblur    失去焦点事件
            onchange  状态发生改变时触发的事件
            onclick   单击事件
            oncontextmenu 右击快捷菜单事件
            ondblclick  左键双击事件
            onfocus   获取焦点事件
            oninput   输入内容事件
            onkeydown/onkeypress/onkeyup  键盘按键事件
            onload    加载事件
            onmouseenter/onmouseleave  触碰到边触发事件
            onmouseover/onmouseout     鼠标悬停之上事件/鼠标离开事件
            onmousemove                鼠标移动事件
            onreset     重置事件
            onresize    改变窗口大小事件
            onscroll    滚动条滚动事件
            onselect    选中事件
            onsubmit    表单提交事件

        绑定事件的方法：
            1）在网页标签中添加事件属性
               属性值写函数调用
            2）获取指定DOM元素，添加事件绑定
                DOM节点.事件属性=匿名函数
            3）使用addEventListener事件监听添加事件
                DOM节点.addEventListener("没有on的事件名",函数表达式,布尔类型);
                false表示冒泡方式，true表示捕获方式
        注意：
            网页标签不会包含所有事件的，不同的标签有自己合适的事件。

        事件流：
            由多个相同事件组成，触发事件的网页元素有嵌套关系。
        特点：
            当一个元素接收到事件的时候会把他接收到的事件传给自己的父级，一直到window
        注意：
            实现事件流的前提：
                (1)多个事件
                (2)事件类型相同
                (3)触发事件的元素节点有嵌套关系
        事件流的执行顺序：
            事件冒泡[默认识别方式]
                从内到外依次执行
            事件捕获
                从外到内依次执行
        
        阻止事件流的后续事件触发：
            event.stopPropagation();
            如果是冒泡方式，写在里面的节点事件中
            如果是捕获方式，写在外面的节点事件中

        表单验证：
            失去焦点事件
            表单提交事件[表单具有的，不是提交按钮的]
                (1)点击提交按钮 --> 表单提交 --> onsubmit事件
                (2)通过返回true/false实现表单提交/终止
        非空校验语法：
            直接写变量名即可。
            当变量的值为null、undefined、0、''，返回false
        
        event对象
            包含事件源信息的对象，在原生js中把event当做值传递到函数中
            如果是按键事件，event代表的是键盘按键，不是网页元素。
        this当前对象
            能获取当前操作的网页元素

        阻止默认行为 --> 阻止弹出右击快捷菜单
            在oncontextmenu事件中，返回false表示阻止弹出快捷菜单
    </pre>

    <p onclick="fn1()">
        这是p标签
    </p>

    <input type="button" value="按钮" id="btn" />

    <div id="myDiv" ><!--onclick="fn2('div')"-->
        div内P外
        <p id="myP" ><!--onclick="fn2('p')"-->
            p标签内
        </p>
        
    </div>
    
    <select onchange="fn3()">
        <option> -- 1 -- </option>
        <option> -- 2 -- </option>
        <option> -- 3 -- </option>
    </select>

    <form method="get" action="1.html" onsubmit="return checkForm()">
        <!--url地址?name=value&name=value-->
        账号：<input type="text" name="zhanghao" value="" onblur="checkItem()" /><br/>
        密码：<input type="password" name="mima" value=""/><br/>

        <input type="submit" value="提交"/><br/>

        <input type="button" value="普通按钮重置" onreset="fn4()"/>
        <input type="reset" value="重置" onreset="fn4()"/><br/>

    </form>

    <!-- 需求：输出往文本框中输入的内容 -->
    <input id="txt1" type="text" onkeydown="fn5(event,this)" /><br/>
    <input id="txt2" type="text" onkeydown="fn5(event,this)" /><br/>
    <input id="txt3" type="text" onkeydown="fn5(event,this)" /><br/>
    <input type="button" value="普通按钮" onclick="fn6(event,this)"/>
    <br/>
    <br/>

    <!-- 仿快捷菜单 -->
    <div class="box">
        <ul>
            <li>第一项</li>
            <li>第二项</li>
            <li>第三项</li>
        </ul>
    </div>
    <br/>
    <br/>
    <br/>
    <script type="text/javascript" src="js/chapter4-5.js" ></script>
</body>
</html>